@tree_item_selected_bg:#666;
@tree_item_selected_focused_bg:#fb725c;
@tree_labels_color:#eeeeee;

@tree_admin_panel_item_selected_bg:rgb(78, 167, 165);

@tree_icon_folder:"\f114";
@tree_icon_archive:"\f187";
@tree_icon_recycle:"\f014";


.webfx-tree-container {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  font-size: 11px;
}

.webfx-tree-item {
  padding: 5px 4px;
  margin: 0;
  font-size: 11px;
  white-space: nowrap;
  height: 27px;
  position: relative;

  a, a:active, a:hover, a:link {
    margin-left: 0;
    outline:0;
    cursor: default;
    text-decoration: none;
    color: @tree_labels_color;
    span {
      display: inline-block;
      line-height: 19px;
      margin-top: 4px;
      padding-left: 30px;
      background-position: 4px 1px;
      background-repeat: no-repeat;
      font-size: 13px;
      background-size: 16px;
      span.treeLabelPaginationWrapper{
        display: inline;
        padding: 0;
        margin: 0;
        span.treeLabelPaginationPadding{
          display: inline-block;
          margin-right: 8px;
          padding: 0;
        }
        a.treeLabelPagination{
          display: inline-block;
          margin: 0 3px;
          cursor: pointer;
        }
      }

    }
    &.selected-focus{
      color: white;
    }
  }

  img {
    width:24px;
    vertical-align: middle;
    border: 0;
    float:left;
    visibility: hidden;
  }

  &:hover{
    background-color: #666;
  }
  &.selected-webfx-tree-item {
    color : white;
    a {
      color: white !important;
      text-decoration: none;
    }
    &-inactive{
      text-decoration: none;
    }
  }
  &.selected
  {
    background: #ddd;
    color: white;
    text-decoration: none;
  }
  
  .webfx-tree-icon {
    width: 16px;
    height: 16px;
    margin-right:3px;
  }
}

.flat_tree_pane{

  div#tree_container {
    border: 0;
    background-color: transparent;
    > .webfx-tree-item {
      display: none;
    }
    > .webfx-tree-container {
      > .webfx-tree-item{
        margin-top: 10px;

        a span{
          color: rgba(255, 255, 255, 0.55);
          background-image: none!important;
          padding-left: 0;
          margin-top: 5px;
          font-size: 10px;
          letter-spacing: 1px;
          text-transform: uppercase;
          &:before{
            display: none;
          }
        }
      }
    }
  }
  .webfx-tree-item{
    background-color: transparent;
    cursor: pointer;
    padding: 4px 20px;
    a{
      color: rgba(255, 255, 255, 0.9) !important;
      cursor: pointer;
      letter-spacing: 1px;
      span{
        padding-left: 33px;
        background-position: 13px 4px !important;
        background-repeat: no-repeat;
        font-size: 13px;
        background-size: 12px;
        padding-top: 1px;
      }
    }
    img{
      display:none;
    }
  }

  div.webfx-tree-item.selected-webfx-tree-item-inactive,
  div.webfx-tree-item.selected-webfx-tree-item{
    background-color: rgba(255, 255, 255, 0.15) !important;
  }
  
  div.webfx-tree-item.selected-webfx-tree-item a,
  div.webfx-tree-item.selected-webfx-tree-item-inactive a{
    text-shadow: none;
    color:#fff !important;
  }
  

  div.webfx-tree-container.first_container {
    padding: 0;
  }

  div.scrolling div.webfx-tree-container.first_container {
    padding: 0;
  }

  div.webfx-tree-container > .webfx-tree-container > .webfx-tree-container{
    margin-bottom: 0;
    box-shadow: none;
  }

  div.webfx-tree-container > .webfx-tree-container > .webfx-tree-item{
    background-color: transparent;
    border-top:0;
  }

  div.webfx-tree-container{
    > .webfx-tree-container {
      > .webfx-tree-container{
        div.webfx-tree-item{
          padding-left: 40px;
        }
        > .webfx-tree-container{
          div.webfx-tree-item{
            padding-left: 60px;
          }
          > .webfx-tree-container{
            div.webfx-tree-item{
              padding-left: 80px;
            }
          }
        }
      }
    }
  }
}

div#tree_container{

  > div:first-child {
    padding-left: 16px;
  }

  > div.first_container{
    margin-left: -11px;
  }

  > div:first-child > a > span,
  div[data-node-icon] > a > span {
    background-image: none !important;
    padding-left: 4px;
  }

  > div:first-child > a > span:before,
  div[data-node-icon] > a > span:before {
    content: "\f015";
    font-size: 1.2em;
    padding-right: 18px;
    font-family: @fontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
  }

  /* default: FOLDER */
  div[data-node-icon] > a > span:before {
    content: @tree_icon_folder;
  }

  div[data-node-icon="zip.png"] > a > span:before {
    content: @tree_icon_archive;
  }

  div[data-node-icon="trashcan_full.png"] > a > span:before,
  div[data-node-icon="trashcan.png"] > a > span:before {
    content: @tree_icon_recycle;
  }

}


#folder_pane{
  margin-left: -4px;
}

#folder_pane.show_first_level div#tree_container > div.webfx-tree-container > div.webfx-tree-container{
  display: none !important;
}

div.selected-webfx-tree-item-inactive{
  background-color: @tree_item_selected_bg !important;
}

div.selected-webfx-tree-item, .selected-focus{
  background-color: @tree_item_selected_focused_bg !important;
}

.settings_main_pane div.selected-webfx-tree-item,
.settings_main_pane div.selected-focus,
.settings_main_pane tr.selected-focus{
  background-color: @tree_admin_panel_item_selected_bg;
}
div.treeCopyContainer div.webfx-tree-item a {
  color: #555 !important;
}

div.treeCopyContainer div.selected-webfx-tree-item a,
div.treeCopyContainer div.webfx-tree-item:hover a,
div.treeCopyContainer div.selected-webfx-tree-item-inactive a
{
  color: white !important;
}

.webfx-tree-item{
  div.overlay_icon_div {
    display: inline;
    span.overlay-class-span {
      margin: 0 !important;
      padding: 0 0 0 8px !important;
      font-size: 11px !important;
      opacity: 0.73;
      &.mdi-radar{
        padding: 0 !important;
        margin: 0 5px !important;
      }
    }
  }
  &.selected-webfx-tree-item{
    div.overlay_icon_div{
      span.overlay-class-span{
        color: white !important;
      }
    }
  }
}
